<template>
  <div class="input-box">
    <a href="javascript:void(0)" @click="inputInfo" style="font-size: 1.2rem;">
      <slot></slot>
    </a>
    <input type="hidden" id="show">
  </div>
</template>
<script>
  import Vue from 'vue'
  export default {
    props: ['value'],
    methods: {
      inputInfo() {
        let that = this
        var options = {
          type: 1,
          domID: 'show',
          preText: '',
          uri: 'http://ebank.bgzchina.com',
          ak: '5c42362016913ae8',
          sk: '1e5b008a8e3eae0tXRTmkYKQ',
          callback: function(res) {
            that.info += res.word
          },
          closeback: function() {},
        }
        window.inputRareWordSDK(options)
      },
    },
    data: function() {
      return {
        info: this.value || '',
      }
    },
    mounted: function() {},
    watch: {
      value(val) {
        this.info = val || ''
      },
      info(newVal) {
        this.$emit('input', newVal)
      }
    }
  }
</script>
<style lang="less" scoped>
  .input-box {
    position: absolute;
    left: 0;
    top: 0;
  }
</style>
